<template>
  <div>
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      @submit.native.prevent
    >
      <el-form-item label="操作者名称:">
        <el-input
          v-model="formInline.operator"
          placeholder="操作者名称"
          @keyup.enter.native="getOperateLogListByOperator"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round @click="getOperateLogListByOperator"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item >
        <el-popconfirm title="确定删除吗？" @confirm="batchDelOperateLog(null)">
          <el-button
            type="danger"
            round
            slot="reference"
            :disabled="batchDelOperateLogStatus"
            >批量删除</el-button
          >
        </el-popconfirm>
      </el-form-item>
    </el-form>

    <el-table
      :data="operateLogList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" > </el-table-column>
      <el-table-column prop="operator" label="操作者"> </el-table-column>
      <el-table-column prop="operateType" label="操作方式"> </el-table-column>
      <el-table-column prop="operateMethod" label="操作方法"> </el-table-column>
      <el-table-column prop="params" label="传入参数"> </el-table-column>
      <el-table-column prop="operateResult" label="操作结果"> </el-table-column>
      <el-table-column prop="createTime" label="操作时间"> </el-table-column>
      <el-table-column label="操作" width="70px" fixed="right">
        <template slot-scope="scope">          
          <el-tooltip content="删除" placement="top" effect="light">
            <el-popconfirm
              title="确定删除吗？"
              @confirm="batchDelOperateLog(scope.row.id)"
            >
              <el-button
                slot="reference"
                size="mini"
                type="danger"
                icon="el-icon-delete"
              ></el-button>
            </el-popconfirm>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="current"
      :page-sizes="[10, 15, 20, 50]"
      :page-size="size"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: "OperateLog",
  data() {
    return {
      current: 1,
      size: 10,
      total: 0,
      batchDelOperateLogStatus: true,
      isSuperAdmin: false,
      isAdmin: false,
      isUser: false,
      operateLogList: [],
      multipleSelection: [],
      formInline: {
        operator: "",
      },
    };
  },
  methods: {
    getOperateLogListByOperator() {
      this.current = 1;
      this.getOperateLogListByOperator();
    },
    handleSizeChange(val) {
      this.size = val;
      this.getOperateLogListByOperator();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.getOperateLogListByOperator();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.batchDelOperateLogStatus = val.length == 0;
      // console.log(this.multipleSelection);
    },
    getOperateLogListByOperator() {
      this.$axios
        .get("/operateLog/page", {
          params: {
            operator: this.formInline.operator,
            current: this.current,
            size: this.size,
          },
        })
        .then((res) => {
          this.operateLogList = res.data.data.records;
          this.total = res.data.data.total;
        });
    },
    getRole() {
      let role = this.$store.state.role;
      if (role) {
        if (role === "user") this.isUser = true;
        if (role === "admin") this.isAdmin = true;
        if (role === "superAdmin") this.isSuperAdmin = true;
      }
    },
    batchDelOperateLog(id) {
      // console.log(id);
      var ids = [];
      if (id) {
        ids.push(id);
      } else {
        this.multipleSelection.forEach((row) => {
          ids.push(row.id);
        });
      }
      console.log("ids:" + ids);
      this.$axios.post("/operateLog/remove", ids).then((res) => {
        this.$message({
          showClose: true,
          type: "success",
          message: "删除成功!",
          onClose: () => {
            this.getOperateLogListByOperator();
          },
        });
      });
    },
  },
  created() {
    this.getOperateLogListByOperator();
    this.getRole();
  },
  // mounted() {
  //   this.timer = window.setInterval(() => {
  //     setTimeout(() => {
  //       this.getOperateLogListByOperator();
  //     }, 0);
  //   }, 3000);
  // },
  // destroyed() {
  //   window.clearInterval(this.timer);
  // },
};
</script>
<style scoped>

</style>